<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>

    <!-- vue -->
    <script src="./assets/js-vue/vue.js"></script>
    <!--element-->
    <link rel="stylesheet" type="text/css" href="./assets/js-vue/element/index.css">
    <!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <script src="./assets/js-vue/element/index.js"></script>
    <script type="text/javascript" src="./assets/jquery-3.6.1.min.js"></script>
    <script type="text/javascript" src="./utils/common.js"></script>
    <!--请求封装-->
    <script type="text/javascript" src="utils/myAjax.js"></script>

    <style>
        .login {
            display: flex;
            justify-content: center;
            align-items: center;
            overflow-y: hidden;
            background-color: #3a8ee6;
        }
        .title {
            margin: 0px auto 30px auto;
            text-align: center;
            color: #707070;
        }
        .login-form {
            border-radius: 6px;
            background: #ffffff;
            width: 400px;
            padding: 25px 25px 5px 25px;
        }

        .login-form  .el-input {
            height: 38px;

        }
        .login-form  .el-input input {
            height: 38px;
        }
    </style>

</head>
<body>
    <div id="app">
        <div class="login" :style="{height:screenHeight}">
            <el-form ref="loginForm" :model="loginForm"  class="login-form">
                <h3 class="title">程序员考试系统</h3>
                <el-form-item prop="username">
                    <el-input
                            v-model="name"
                            type="text"
                            auto-complete="off"
                            placeholder="账号"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input
                            v-model="passwd"
                            type="password"
                            auto-complete="off"
                            placeholder="密码"
                            @keyup.enter.native="login()"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item style="width:100%;">
                    <el-button
                            :loading="loading"
                            size="medium"
                            type="primary"
                            style="width:100%;"
                            @click.native.prevent="login()"
                    >
                        <span v-if="!loading">登 录</span>
                        <span v-else>登 录 中...</span>
                    </el-button>
                    <el-button size="medium"
                               type="primary"
                               style="width:100%;margin-left: 0px" @click.native.prevent="toRegister()">注册
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--<input type="text" placeholder="用户名" id="name"/>
        <input type="password" placeholder="密码" id="pwd"/>
        <button id="login" onclick="login()">登录</button>
        <button id="register" @click="toRegister()">注册</button>-->

        <el-dialog title="注册表单" :visible.sync="open">
            <el-form :model="form" ref="form" :label-width="formLabelWidth">
                <el-form-item label="用户名" :label-width="formLabelWidth" >
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth">
                    <el-input v-model="form.passwd" autocomplete="off" show-password></el-input>
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth">
                    <el-input v-model="form.passwd1" autocomplete="off" show-password></el-input>
                </el-form-item>
                <!--<el-form-item label="用户类型" :label-width="formLabelWidth">
                    <el-select v-model="form.type" placeholder="请选择类型">
                        <el-option label="管理员" value="admin"></el-option>
                        <el-option label="普通用户" value="normal"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="电话" :label-width="formLabelWidth">
                    <el-input v-model="form.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="部门" :label-width="formLabelWidth">
                    <el-input v-model="form.dpm" autocomplete="off"></el-input>
                </el-form-item>-->
                <el-form-item label="地址" prop="addr">
                    <el-input v-model="form.addr" placeholder="请输入地址" />
                </el-form-item>
                <el-form-item label="用户邮箱" prop="birth">
                    <el-input v-model="form.email" placeholder="请输入出生日期" />
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-input v-model="form.sex" placeholder="请输入性别" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="open = false">取 消</el-button>
                <el-button type="primary" @click="register">确 定</el-button>
            </div>
        </el-dialog>
    </div>



<script type="application/javascript">
    var app = new Vue({
        el:'#app',
        data(){
            return{
                loading:false,
                formLabelWidth:'120px',
                open:false,
                form:{
                },
                loginForm:{},
                name:undefined,
                passwd:undefined,
                screenHeight: '600px',
            }
        },
        mounted() {
            this.screenHeight = window.innerHeight - 20 + 'px' ; // 获取屏幕高度
            window.addEventListener('resize', this.updateScreenHeight); // 添加resize事件监听器
        },
        beforeUnmount() {
            window.removeEventListener('resize', this.updateScreenHeight); // 在组件销毁前移除事件监听器
        },
        methods:{
         updateScreenHeight() {
                this.screenHeight = window.innerHeight; // 更新屏幕高度
         },
         toRegister() {
            /*window.location = '/register.html'*/
            this.open =true;
            this.form = {
                name:undefined,
                passwd:undefined,
                type:undefined,
                phone:undefined,
                dpm:undefined
            }
          },
          register(){

             if(this.form.passwd != this.form.passwd1){
                alert("两次输入的密码不一致，请重新输入")
                 return;
             }

             $.ajax({
                 method:"POST",
                 url:"/login/register",
                 data:this.form,
                 success:(res)=>{
                     if(res.msg == '操作成功'){
                         this.$message.success("注册成功");
                         this.open = false;
                     } else if(res.msg == '该用户名已存在'){
                         this.$message.success("用户已存在，请重新输入");
                     }else{
                         this.$message.success("注册失败");
                     }
                 }
             })
              /*axios.post("/login/register",this.form).then(res=>{
                  if(res.result == 'yes'){
                      this.$message.success("注册成功");
                      this.open = false;
                  }
              })*/
          },
          login() {
                const name = this.name;
                const pwd = this.passwd;
                if(!name || !pwd){
                    alert('请输入用户名和密码');
                    return
                }
                $.ajax({
                    method:'POST',
                    url:'/login',
                    data:{name:name,passwd:pwd},
                    success:(res)=>{
                        if(res.result == 'yes'){
                            createCookie("token",res.token, 0.1)
                            window.location="/layout.html";
                        }else{
                            alert('账号或密码错误');
                        }
                    },
                    error:(e)=>{
                        alert('登录失败 :' +e)
                    }
                })
          }

        }

    })



    function login() {
        /*const name = document.getElementById("name").value;
        const pwd = $('#pwd').val();*/

        const name = this.name;
        const pwd = this.passwd;

        if(!name || !pwd){
            alert('请输入用户名和密码');
            return
        }

        $.ajax({
            method:'POST',
            url:'/login',
            data:{name:name,passwd:pwd},
            success:(res)=>{
                if(res.result == 'yes'){
                   createCookie("token",res.token, 0.1)
                       window.location="/layout.html";
                }else{
                    alert('账号或密码错误');
                }
            },
            error:(e)=>{
                alert('登录失败 :' +e)
            }

        })


    }

    // 创建一个 Cookies 对象
    function createCookie(name, value, days) {
        let expires = "";
        if (days) {
            const date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            expires = "; expires=" + date.toUTCString();
        }
        document.cookie = name + "=" + (value || "") + expires + "; path=/";
        return true;
    }


</script>

</body>
</html>